<template>
  <!-- 混凝土试块  -->
  <div class="all-page">
    <el-button type="primary" class="back-button" @click="back">返回上级页面</el-button>
    <el-button type="primary" class="back-button" @click="print">打印报表</el-button>

    <div v-for="(page, pageIndex) in dataPages" :key="'page-' + pageIndex" class="page">
      <div class="document-header">
        <h1 class="document-title">混凝土试块抗压强度汇总及评定表</h1>
      </div>
      <div class="info-row">
        <div class="info-left">
          <span class="label">工程名称:</span>
          <span class="value kai-font">{{ previewData.subprojectName }}</span>
        </div>
        <div class="info-right">
          <span class="label">日期:</span>
          <span class="value kai-font">{{ previewData.stdPassDate }}</span>
        </div>
      </div>

      <table class="main-table">
        <!-- 第一行 -->
        <tr class="header-row">
          <th rowspan="3">序号</th>
          <th rowspan="3" class="special-width">试块代表部位</th>
          <th rowspan="3">设计强度等级</th>
          <th rowspan="3">试验报告编号</th>
          <th rowspan="3">龄期(d)</th>
          <th rowspan="3">试块抗压强度值(N/㎡)</th>
          <th colspan="3">数理统计</th>
          <th colspan="2">非数理统计</th>
          <th rowspan="3">评定结果</th>
        </tr>
        <!-- 第二行 -->
        <tr class="header-row">
          <th colspan="3" style="border: none; border-right: 1px solid black;">
            <span class="math">m<sub>fcu</sub> ≥ f<sub>cu,k</sub> + λ<sub>1</sub> · S<sub>fcu</sub></span>
          </th>
          <th colspan="2" style="border: none;">
            <span class="math">m<sub>fcu</sub> ≥ λ<sub>3</sub> f<sub>cu,k</sub></span>
          </th>
        </tr>
        <!-- 第三行 -->
        <tr class="header-row">
          <th colspan="3" style="border: none; border-right: 1px solid black;">
            <span class="math">f<sub>cu,min</sub> ≥ λ<sub>2</sub> × f<sub>cu,k</sub></span>
          </th>
          <th colspan="2" style="border: none;">
            <span class="math">f<sub>cu,min</sub> ≥ λ<sub>4</sub> f<sub>cu,k</sub></span>
          </th>
        </tr>
        <tr v-for="(row, idx) in page.sectionA" :key="'a-' + pageIndex + '-' + idx">
          <td>{{ (pageIndex * 13) + idx + 1 }}</td>
          <td>{{ row.usePart }}</td>
          <td>{{ row.concreteStrength }}</td>
          <td>{{ row.reportNumber }}</td>
          <td>{{ row.concreteAge }}</td>
          <td>{{ row.representStrength }}</td>
          <td v-if="idx === 0" rowspan="6"
              style="writing-mode: vertical-rl; text-orientation: mixed; vertical-align: middle;"
          >
            计算数据
          </td>
          <td v-if="idx === 0" colspan="2" rowspan="6" class="inner-cell no-right-border">
            <div class="inner-grid-6x2">
              <div class="grid-label math">m<sub>fcu</sub></div>
              <div class="grid-value num">{{ std.mfcu }}</div>
              <div class="grid-label math">S<sub>fcu</sub></div>
              <div class="grid-value num">{{ std.sfcu }}</div>
              <div class="grid-label math">f<sub>cu,min</sub></div>
              <div class="grid-value num">{{ std.fcumin }}</div>
              <div class="grid-label math">f<sub>cu,k</sub></div>
              <div class="grid-value num">{{ std.fcuk }}</div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
          </td>
          <td v-if="idx === 0" colspan="2" rowspan="6" class="inner-cell no-left-border">
            <div class="inner-grid-6x2">
              <div class="grid-label math">λ<sub>1</sub></div>
              <div class="grid-value num">{{ std.lambda1 }}</div>
              <div class="grid-label math">λ<sub>2</sub></div>
              <div class="grid-value num">{{ std.lambda2 }}</div>
              <div class="grid-label math">n</div>
              <div class="grid-value num">{{ std.n }}</div>
              <div class="grid-label math">λ<sub>3</sub></div>
              <div class="grid-value num">{{ std.lambda3 }}</div>
              <div class="grid-label math">λ<sub>4</sub></div>
              <div class="grid-value num">{{ std.lambda4 }}</div>
              <div></div>
              <div></div>
            </div>
          </td>
          <td v-if="idx === 0" rowspan="6"></td>
        </tr>
        <tr v-for="(row, idx) in page.sectionB" :key="'b-' + pageIndex + '-' + idx">
          <td>{{ (pageIndex * 13) + idx + 7 }}</td>
          <td>{{ row.usePart }}</td>
          <td>{{ row.concreteStrength }}</td>
          <td>{{ row.reportNumber }}</td>
          <td>{{ row.concreteAge }}</td>
          <td>{{ row.representStrength }}</td>
          <td v-if="idx === 0" rowspan="7"
              style="writing-mode: vertical-rl; text-orientation: mixed; vertical-align: middle;"
          >
            计算数据
          </td>
          <td v-if="idx === 0" rowspan="7" colspan="4" class="inner-cell">
            <div class="inner-grid-6x2">
              <div class="grid-title">数理统计</div>
              <div class="grid-title"></div>
              <div class="grid-label math">m<sub>fcu</sub> ≥ f<sub>cu,k</sub> + λ<sub>1</sub> · S<sub>fcu</sub></div>
              <div v-if="std.n >= 10" class="grid-value num">{{ std.result1Left }} ≥ {{ std.result1Right }}</div>
              <div v-else class="grid-value"></div>
              <div class="grid-label math">f<sub>cu,min</sub> ≥ λ<sub>2</sub> × f<sub>cu,k</sub></div>
              <div v-if="std.n >= 10" class="grid-value num">{{ std.result2Left }} ≥ {{ std.result2Right }}</div>
              <div v-else class="grid-value"></div>
              <div class="grid-title">非数理统计</div>
              <div class="grid-title"></div>
              <div class="grid-label math">m<sub>fcu</sub> ≥ λ<sub>3</sub> f<sub>cu,k</sub></div>
              <div v-if="std.n < 10" class="grid-value num">{{ std.result3Left }} ≥ {{ std.result3Right }}</div>
              <div v-else class="grid-value"></div>
              <div class="grid-label math">f<sub>cu,min</sub> ≥ λ<sub>4</sub> f<sub>cu,k</sub></div>
              <div v-if="std.n < 10" class="grid-value num">{{ std.result4Left }} ≥ {{ std.result4Right }}</div>
              <div v-else class="grid-value"></div>
            </div>
          </td>
          <td v-if="idx === 0" rowspan="7" colspan="1">
            <template v-if="std.isStdPassed == 1">合格</template>
            <template v-else>不合格</template>
          </td>
        </tr>

      </table>
      <div class="report-footer">
        <span>监理工程师：</span>
        <span>施工项目技术负责人：</span>
        <span>审核：</span>
        <span>计算：</span>
        <div style="display: inline-block;"></div>
      </div>
    </div>
  </div>
</template>

<script>

/*
 *    这个报表真麻烦！！！
 *
 */
import { searchConcreteItem } from '@/api/statementManage/hunNingTu/hunNingTu'
import router from '@/router'

export default {
  data() {
    return {
      localStorageId: '',
      reportData: { concreteStrengthStd: {} },
      previewData: {}
    }
  },
  computed: {
    std() {
      return (this.reportData && this.reportData.concreteStrengthStd) || {}
    },
    filledRows() {
      const list = (this.reportData && this.reportData.concreteTableItemVOList) || []
      return list.map(item => ({
        usePart: item.usePart || '',
        concreteStrength: item.concreteStrength || '',
        reportNumber: item.reportNumber || '',
        concreteAge: item.concreteAge || '',
        representStrength: item.representStrength || ''
      }))
    },
    dataPages() {
      const rows = this.filledRows
      const pages = []
      const pageSize = 13

      for (let i = 0; i < rows.length; i += pageSize) {
        const pageRows = rows.slice(i, i + pageSize)
        // 如果不足13行，用空行填充
        while (pageRows.length < pageSize) {
          pageRows.push({
            usePart: '', concreteStrength: '', reportNumber: '', concreteAge: '', representStrength: ''
          })
        }
        pages.push({
          rows: pageRows,
          sectionA: pageRows.slice(0, 6),
          sectionB: pageRows.slice(6, 13)
        })
      }

      // 如果没有数据，至少创建一个空页面
      if (pages.length === 0) {
        const emptyRows = Array(13).fill().map(() => ({
          usePart: '', concreteStrength: '', reportNumber: '', concreteAge: '', representStrength: ''
        }))
        pages.push({
          rows: emptyRows,
          sectionA: emptyRows.slice(0, 6),
          sectionB: emptyRows.slice(6, 13)
        })
      }

      return pages
    }
  },
  async mounted() { // 钩子函数
    const localStorageId = this.$route.query.localStorageId
    this.localStorageId = localStorageId // 保存id用于销毁时清理
    if (localStorageId) {
      const data = localStorage.getItem(localStorageId)
      if (data) {
        this.previewData = JSON.parse(data)
        const res = await searchConcreteItem(
          this.previewData.projectId,
          this.previewData.subprojectId,
          this.previewData.stdPassDate,
          this.previewData.maintCondition,
          this.previewData.concreteStrength
        )
        this.reportData = res.result
        console.log(this.reportData)
      }
    }

  },
  beforeDestroy() { // 离开页面要做的事
    // 那就是清除localstorage！！！
    if (this.localStorageId) {
      localStorage.removeItem(this.localStorageId)
    }
    document.querySelector('body').setAttribute('style', 'background-color: white;') // 还原，因为这是个全局样式
  },
  beforeCreate() {
    document.querySelector('body').setAttribute('style', 'background-color:#f5f5f5;') // 设置对比色
  },
  methods: {
    back() {
      router.push({ path: '/menus/statement/statementTable/biaoHun-shiKuaiPingDing' })
    },
    print() {
      window.print()
    }
  }
}
</script>

<style>
.all-page {
  width: 100%;
  padding-bottom: 5%;
}

.back-button {
  position: fixed;
  top: 1.5rem;
  left: 6.25rem;
  z-index: 1000;
  background-color: #409eff;
  border-color: #409eff;
  color: white;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

.back-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.page {
  padding: 2% 2% 0;
  width: 70%;
  aspect-ratio: 297 / 210;
  /* A4 横向比例 */
  margin: 5% auto;
  background-color: white;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
  line-height: 1.25rem;
}

.document-header {
  text-align: center;
  margin-bottom: 2%;
}

.document-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  padding: 1% 0;
}

.info-row {
  padding-left: 2%;
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  align-items: center;
  margin-bottom: 1%;
}

.info-left {
  margin-left: 2%;
  min-width: 12.5rem;
}

.special-width {
  width: 12rem;
}

.info-right {
  margin-left: auto;
  margin-right: 2%;
  min-width: 12.5rem;
}

.label {
  font-weight: bold;
  white-space: nowrap;
}

.value {
  margin-right: 3%;
}

.kai-font {
  font-family: "Times New Roman", "楷体", "KaiTi", "STKaiti", sans-serif;
  font-size: 0.9375rem;
}

.num {
  font-family: "Times New Roman", serif;
}

.math {
  font-family: "Times New Roman", serif;
}

.main-table {
  width: 100%;
  border-collapse: collapse;
  border: 0.18rem solid #000;
}

.main-table th,
.main-table td {
  border: 0.1rem solid #000;
  text-align: center;
  vertical-align: middle;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.inner-cell {
  padding: 0.2rem;
}

.inner-grid-6x2 {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-auto-rows: minmax(1.8rem, auto);
  gap: 0.1rem;
}

.no-right-border {
  border-right-color: transparent;
}

.no-left-border {
  border-left-color: transparent;
}

.grid-label {
  text-align: center;
  font-size: 0.92rem;
  padding: 0 0.2rem;
}

.grid-value {
  text-align: center;
  font-size: 0.95rem;
}

.grid-title {
  text-align: center;
  font-weight: 600;
  font-size: 0.98rem;
}

.header-row th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.report-footer {
  display: flex;
  justify-content: space-between;
  width: 95%;
  margin: 10px auto 0;
}

.page {
  margin-bottom: 2rem;
}

.page:last-child {
  margin-bottom: 0;
}

/* 打印样式 */
@media print {
  @page {
    size: A4 portrait;
    margin: 0.5in;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body {
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .all-page {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: white !important;
  }

  .back-button {
    display: none !important;
  }

  .page {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: white !important;
    page-break-inside: avoid;
    font-size: 0.8rem !important;
    height: auto !important;
    min-height: auto !important;
    max-height: 10in !important;
    overflow: hidden !important;
  }

  .page:not(:last-child) {
    page-break-after: always;
    margin-bottom: 0 !important;
  }

  .page:last-child {
    page-break-after: avoid;
    margin-bottom: 0 !important;
  }

  .document-header {
    text-align: center;
    margin-bottom: 0.1in !important;
    background: white !important;
  }

  .document-title {
    font-size: 1.2rem !important;
    font-weight: 700;
    margin: 0 !important;
    padding: 0.1in 0 !important;
    background: white !important;
    color: black !important;
  }

  .info-row {
    padding-left: 0.1in !important;
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    align-items: center;
    margin-bottom: 0.05in !important;
    background: white !important;
  }

  .info-left {
    margin-left: 0.1in !important;
    min-width: 2in !important;
    background: white !important;
  }

  .info-right {
    margin-left: auto;
    margin-right: 0.1in !important;
    min-width: 2in !important;
    background: white !important;
  }

  .label {
    font-weight: bold;
    white-space: nowrap;
    background: white !important;
    color: black !important;
  }

  .value {
    margin-right: 3%;
    background: white !important;
    color: black !important;
  }

  .kai-font {
    font-family: "Times New Roman", "楷体", "KaiTi", "STKaiti", sans-serif !important;
    font-size: 0.8rem !important;
    background: white !important;
    color: black !important;
  }

  .num {
    font-family: "Times New Roman", serif !important;
    background: white !important;
    color: black !important;
  }

  .math {
    font-family: "Times New Roman", serif !important;
    background: white !important;
    color: black !important;
  }

  .main-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 0.1rem solid #000 !important;
    margin: 0.1in auto 0 !important;
    background: white !important;
    font-size: 0.7rem !important;
  }

  .main-table th,
  .main-table td {
    border: 0.1rem solid #000 !important;
    text-align: center;
    vertical-align: middle;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 0.05in 0.02in !important;
    background: white !important;
    color: black !important;
    page-break-inside: avoid;
    height: 0.3in !important;
    min-height: 0.3in !important;
    max-height: 0.3in !important;
    line-height: 1.2 !important;
  }

  .inner-cell {
    padding: 0.05in !important;
    background: white !important;
  }

  .inner-grid-6x2 {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    grid-auto-rows: minmax(0.15in, auto);
    gap: 0.02in;
    background: white !important;
  }

  .no-right-border {
    border-right-color: transparent !important;
  }

  .no-left-border {
    border-left-color: transparent !important;
  }

  .grid-label {
    text-align: center;
    font-size: 0.7rem !important;
    padding: 0 0.02in !important;
    background: white !important;
    color: black !important;
  }

  .grid-value {
    text-align: center;
    font-size: 0.7rem !important;
    background: white !important;
    color: black !important;
  }

  .grid-title {
    text-align: center;
    font-weight: 600;
    font-size: 0.7rem !important;
    background: white !important;
    color: black !important;
  }

  .header-row th {
    background-color: #f2f2f2 !important;
    font-weight: bold;
    font-size: 0.7rem !important;
  }

  .report-footer {
    display: flex;
    justify-content: space-between;
    width: 95%;
    margin: 0.1in auto 0 !important;
    background: white !important;
    color: black !important;
  }

  .report-footer span {
    background: white !important;
    color: black !important;
  }

  /* 确保所有行背景为白色和高度一致 */
  .main-table tr {
    background: white !important;
    height: 0.3in !important;
    min-height: 0.3in !important;
    max-height: 0.3in !important;
  }

  .main-table tr:nth-child(even) {
    background: white !important;
    height: 0.3in !important;
    min-height: 0.3in !important;
    max-height: 0.3in !important;
  }

  .main-table tr:nth-child(odd) {
    background: white !important;
    height: 0.3in !important;
    min-height: 0.3in !important;
    max-height: 0.3in !important;
  }

  /* 确保所有表格单元格高度一致 */
  .main-table tr td {
    height: 0.3in !important;
    min-height: 0.3in !important;
    max-height: 0.3in !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
  }

  /* 特殊宽度保持 */
  .special-width {
    width: 11rem !important;
  }

  /* 确保没有额外的空白页 */
  .page:empty {
    display: none !important;
  }

  /* 防止内容溢出导致额外分页 */
  .main-table {
    page-break-inside: avoid;
    max-height: 8in !important;
    overflow: hidden !important;
  }

  .main-table tr {
    page-break-inside: avoid;
  }

  /* 确保页脚不会导致额外分页 */
  .report-footer {
    page-break-inside: avoid;
    max-height: 0.5in !important;
  }

  /* 严格控制页面高度，防止空白页 */
  .page {
    max-height: 10in !important;
    overflow: hidden !important;
  }

  /* 确保空行不占用额外空间 */
  .main-table tr:empty {
    display: none !important;
  }

  /* 强制所有行高度一致，包括空行 */
  .main-table tbody tr {
    height: 0.3in !important;
    min-height: 0.3in !important;
    max-height: 0.3in !important;
  }
}
</style>
